<template>
	<view class="search">
		<view class="tj">

			<view class="hot" v-show="hotShow">
				<uni-tag :text="item.title" inverted="true" type="primary" :circle="false" size="small"
					v-for="item in searchlist" :key="item.index" @click="ck(item.title)"></uni-tag>
			</view>

			<view class="tjCon">
				<view class="item" v-for="item in slist" :key="item.index" @click="goDetails(item.id)">
					<image :src="item.cover_image_url" alt="" mode="" />
					<view class="txt">
						<view class="t1">
							{{item.title}}
						</view>
						<view class="info">
							{{item.description}}
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				slist: '',
				hotShow: true,
				searchlist: [],
				val:''
			}
		},
		onLoad() {
			console.log("onload")
			// 获取搜索热词 接口失效 以下模拟数据
			this.searchlist = [{
					title: '魔幻'
				},
				{
					title: '都市'
				},
				{
					title: '玄幻'
				},
				{
					title: '爱情'
				},
				{
					title: '神仙'
				},
				{
					title: '妖魔'
				},
			]
			// uni.request({
			// 	url: '/dpc1/search/mini/hot_word?&page=1&size=10',
			// 	success: (res) => {
			// 		console.log("热词", res)
			// 	}
			// })
		},


		// ifdef APP-PLUS
		// onLoad() {
		// 	console.log("onload")
		// 	// 获取搜索热词
		// 	uni.request({
		// 		url: '/dpc1/search/mini/hot_word?&page=1&size=10',
		// 		success: (res) => {
		// 			console.log("热词", res)
		// 		}
		// 	})
		// },

		//endif

		// 点击搜索框右侧的按钮事件
		onNavigationBarButtonTap(e) {
			console.log("success",e)
			// this.onNavigationBarSearchInputConfirmed()
		},
		// 搜索框点击搜索事件
		onNavigationBarSearchInputConfirmed(e) {
			console.log("你点击了按钮", e.text)
			this.val = e.text
			uni.request({
				url: '/dpc/v1/search/topic?q=' + this.val + '&f=3&size=18',
				success: (res) => {
					console.log(res)
					if(res.data.data.total == 0){
						return uni.showToast({
							title:"暂无数据",
							icon:'none'
						})
					}
					this.slist = res.data.data.hit
				}
			})
		},


		// ifdef APP-PLUS
		// 搜索框点击搜索事件
		onNavigationBarSearchInputConfirmed(e) {
			console.log("你点击了按钮", e.text)
			uni.request({
				url: '/dpc/v1/search/topic?q=' + e.text + '&f=3&size=18',
				success: (res) => {
					console.log(res)
					this.slist = res.data.data.hit
				}
			})
		},


		//endif

		methods: {
			ck(title) {
				console.log(title);
				this.val = title
				this.hotShow = false
				// 调用搜索
				uni.request({
					url: '/dpc/v1/search/topic?q=' + this.val + '&f=3&size=18',
					success: (res) => {
						console.log(res)
						if(res.data.data.total == 0){
							return uni.showToast({
								title:"暂无数据",
								icon:'none'
							})
						}
						this.slist = res.data.data.hit
					}
				})
			},
			
			goDetails(id){
				uni.navigateTo({
					url:"../details/details?id=" + id
				})
			}
		},
	}
</script>

<style>
	.hot {
		position: fixed;
		top: 90rpx;
		left: 0;
		z-index: 99;
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
		padding: 20rpx;
		width: 100vw;
		box-sizing: border-box;
	}

	.uni-tag {
		width: 17%;
		margin: 20rpx 10rpx;
	}

	.hot .uni-tag:nth-child(4n) {
		margin-right: 0 !important;
	}

	/deep/.uni-tag-text {
		color: #8f8f8f !important;
	}

	.primary-uni-tag--inverted {
		color: #484848;
		background-color: #a7a7a700;
		border-width: 1px;
		border-style: solid;
		border-color: #a8a8a8;
	}



	/deep/.uni-btn-icon {
		color: #fff !important;
	}

	.tjCon {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 10px;
	}

	.tjCon .item {
		width: 48%;
		margin-bottom: 20px;
	}

	.tjCon .item image {
		width: 100%;
		height: 105px;
	}

	.tjCon .item .txt .t1 {
		font-size: 14px;
		color: #333;
	}

	.tjCon .item .txt .info {
		font-size: 12px;
		color: #a3a3a3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 3px;
	}
</style>
